<template>
  <div class="content">
    <div class="width1200 mgt-40 mgb-40 margin-center">
      <div class="searchBox">
        <el-input v-model="searchInput" placeholder="输入老师名字或者课程关键字搜索" class="input"></el-input>
        <el-button class="searchBtn">搜索</el-button>
      </div>
      <div class="searchText mgt-20 ">
        <p class="mgr-10">热门搜索：</p>
        <p v-for="item in searchText" :key="item.id" class="tag">{{ item.text }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SearchBox",
  data() {
    return {

    };
  },
  props: {
    searchText: {
      type: Array,
      default: () => [
        {
          id: "1",
          text: "小学教育",
        },
        {
          id: "2",
          text: "红色动漫",
        },
        {
          id: "3",
          text: "一年级下期",
        },
      ],
    },
    searchInput: {
      type: String,
      default: ""
    }

  },
};
</script>
<style lang="less" scoped>
.input {
  width: 400px;
  border: none;
  /deep/.el-input__inner {
    border: none;
  }
}
.searchBox {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  border: 1px solid #cb3e3e;
  border-radius: 12px;
  overflow: hidden;
}
.searchBtn {
  background-color: #cb3e3e;
  color: white;
  border: none;
  border-radius: 0;
}
.searchText {
  display: flex;
  color: #333333;
}
.swiper-pagination-bullet {
  margin: 10px;
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
  margin: 10px !important;
}
</style>